<template>
    <div>
        <Tip v-show="tips.isTips" :tipsText="tips.text"/>
        <Top text="添加收货地址"/>
        <div class="table">
            <Input 
                text="联系人" 
                type="text" 
                placeholder='请输入姓名'
                @getInfo="(name) => (this.name = name)"
            />
            <Input 
                text="手机号码" 
                type="text" 
                placeholder='请输入手机号码'
                @getInfo="(phone) => (this.phone = phone)"
            />
            <Input 
                text="详细地址" 
                type="text" 
                placeholder='请输入详细地址'
                @getInfo="(address) => (this.address = address)"
            />
            <CheckBox
                text='设为默认地址'
                @getVal="(isDefaul) => (this.isDefaul = isDefaul)"
            />
        </div>
        <SubmitBtn text="完成" @click.native="addLocatin"/>
    </div>
</template>

<script>
    import SubmitBtn from '@/views/Location/SubmitBtn'
    import CheckBox from '@/views/Location/checkBox'
    import {mapState} from 'vuex'
    import Input from '@/views/Location/Input'
    export default {
        name:"addLocatin-Location",
        components:{Input, CheckBox, SubmitBtn},
        data(){
            return {
                name:"",
                phone:"",
                address:"",
                isDefaul:false,
            }
        },
        methods:{
            addLocatin(){
                const addressInfo = {
                    name:this.name,
                    phone:this.phone,
                    address:this.address,
                    isDefaul:this.isDefaul
                }
                this.$store.dispatch('About/addLocation',addressInfo)
            }
        },
        computed:{
            ...mapState('About',['tips'])
        }
    }
</script>

<style scoped lang='less'>
    .table{
        padding: 10px 0 20px 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
    }
    
    #submit{
        display: block;
        width: 95%;
        height: 40px;
        margin: 0 auto;
        background: #0F6DFD;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-transform: none;
    }

</style>